<template>
    <div class="login-warp">
        <div class="ms-title">music 后台管理登录</div>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleFrom">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitFrom">登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>


<script>
    import {getLoginStatus} from '../api/index'
    export default {
        data () {
            return {
                ruleForm: {
                    username: "admin",
                    password: "123"
                },
                // 规则
                rules: {
                    // username为必填项,如果不填,提示: 请输入用户名,在失去焦点时触发
                    username: {required:true,message:"请输入用户名",trigger:"blur"},
                    password: {required:true,message:"请输入密码",trigger:"blur"},
                }
            }
        },
        methods: {
            submitFrom () {
                /*
                    URLSearchParams: 完成地址的拼接
                */
                let params = new URLSearchParams()
                params.append("name",this.ruleForm.username)
                params.append("password",this.ruleForm.password)

                // 输出测试一下
                //console.log(params.toString())

                // 调用方法,发送请求
                getLoginStatus(params)
                    .then((res) => {
                        if(res.code === 1) {
                            localStorage.setItem("userName",this.ruleForm.username)
                            // 跳转
                            this.$router.push("/Info")
                            // 调用element-ui
                            this.notify("登录成功","success")
                        }else {
                            this.notify("登录失败","error")
                        }
                    })
            }
        }
    }
</script>


<style scoped lang="less">
    .login-warp{
        position: relative;
        background-image: url("../../static/images/background.jpg");
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        height: 100vh;
        .ms-title{
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -230px;
            text-align: center;
            font-size: 30px;
            font-weight: 600;
            color: #fff;
        }
        .ms-login{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 300px;
            height: 160px;
            background-color: #fff;
            padding: 40px;
            border-radius: 5px;

            .login-btn {
                text-align: center;
                button {
                    width: 100%;
                    height: 36px;
                }
            }
        }
    }



    
</style>